<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="commonCSS/div-loading1.css" />
	<link rel="stylesheet" href="commonCSS/commonInitialize.css" />
	<link rel="stylesheet" href="commonCSS/htmlFontSize.css" />
	<link rel="stylesheet" href="userLoginCss/userLogin.css" />
	
	
</head>
<body>
	<!--动画效果的div元素-->
	<div class="hide-loading">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	<script src="indexJs/hideLoadingDiv.js"></script>
	<style type="text/css">
		header#login-header {
			width: 4rem;
			min-width: 100px;
			height: 100%;
			min-height: 280px;
			transition: all 0.4s;
			transform: translateX(-75%);
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
		}
		#header-panel {
			width: 100%;
			min-width: 100px;
			height: 100%;
			margin:  0 auto;
			position: relative;
		}
		.header-nav-ul {
			width: 100%;
			height: 100%;
			transition: all 0.5s;
			overflow: hidden;
			position: relative;
			background: rgba(37, 184, 35, 0.8);
		}
		
		#header-panel:after {
			content: "";
			display: block;
			position: absolute;
			left: 0%;
			top: 50%;
			transform: translateY(-50%);
			transition: all 0.5s;
			width: 0;
			height: 0;
			z-index: -1;
			border-width: 1rem;
			border-style: solid;
			border-color: transparent transparent transparent rgba(37, 284, 35, 0.8);
			border-right: 0;
		}
		/*#header-panel:hover .header-nav-ul {
			width: 100%;
			height: 100%;
		}*/
		header#login-header:hover {
			transform: translate(0);
		}
		#header-panel:hover:after {
			opacity: 0;
		}
		.header-nav-ul > li {
			width: 100%;
			height: 20%;
			border-bottom: 0.08rem solid orange;
			font-size: 0.54rem;
			line-height: calc(100vh / 5);
			transition: all 0.3s;
			padding-left: 0.2rem;
			white-space: nowrap;
			box-sizing: border-box;
			overflow: hidden;
			
		}
		.header-nav-ul > li:hover {
			background: linear-gradient(to bottom, white, rgba(37, 184, 35, 0.7) 25%);
			
		}
		.header-nav-ul > li a {
			display: block;
			width: 100%;
			height: 100%;
			color: white;
		}
		
	</style>
	<header id="login-header">
		<div id="header-panel">
			<ul class="header-nav-ul">
				<li><a href="index.html">&lt;  去首页</a></li>
				<li><a href="shopping.html">&lt;  逛逛商城</a></li>
				<li><a href="publishGoods.html">&lt;  我要发布</a></li>
				<li><a href="userMessage.html">&lt;  我的消息</a></li>
				<li><a href="userCenter.html">&lt;  个人主页</a></li>
			</ul>
		</div>
	</header>
	<section id="login-section">
		<form action="index.html" id="login-form">
			<div class="login-title">
				<h1>手机验证码登录</h1>
			</div>
			<div id="phone-div" class="login-div">
				<label for="phone-input">
					<strong id="phone" class="left">&#9742; 手机号：</strong>
					<input type="text" id="phone-input" autofocus="autofocus" tabindex="1" class="center" placeholder="填入手机号" />
					<button type="button" id="phone-btn" class="right clearValue">&times;</button>
				</label>
			</div>
			<div id="code-div" class="login-div">
				<label for="valid-code">
					<strong id="get-code" class="left">获取与提交：</strong>
					<input type="text" id="valid-code" class="center" tabindex="2" placeholder="验证码" />
					<button type="button" id="code-btn" class="right clearValue">&times;</button>
				</label>
			</div>
			<div class="login-div">
				<label>
					<button type="button" id="submit-btn" class="center">立即登录</button>
				</label>
			</div>
			<style type="text/css">
				
			</style>
			<div id="login-by-other-accounts" class="login-div">
				<div class="login-account">
					<a href="https://m.jiaoyimao.com/session/loginByUcc?redirectUrl=https%3A%2F%2Fm.jiaoyimao.com%2Fgoods%2F1612025336484726.html%3Frecid%3D2980b0e816114286b9c00207a3f8e5be60166b50">
						<img src="https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" height="100%" width="auto" alt="" />
						<div>淘宝账号</div>
					</a>
				</div>
				<div class="login-account">
					<a href="">
						<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3493624719,1506955080&fm=26&gp=0.jpg" alt="" />
						<div>微信账号</div>
					</a>
				</div>
				
			</div>
			
		</form>
		
	</section>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		
		jQuery.noConflict();
		jQuery(function($) {
			
			let phonePattern = /1[345789]\d{9}/gi;
			let phoneVal = null;
			let codeVal = null;
			phoneVal = $("#phone-input").val().trim();
			codeVal = $("#valid-code").val().trim();
			let ans1 = null;
			let ans2 = null;
			$("#submit-btn").click(function() {
				phoneVal = $("#phone-input").val().trim();
				codeVal = $("#valid-code").val().trim();
				ans1 = phonePattern.test(phoneVal);
				ans2 = codeVal ? true : false;
				if(ans1 && ans2) {
					//$("#login-form").submit();
					$("#submit-btn").css({
						"color": "green",
						"border-color": "green",
						"background": "white"
					}).html("可以登录&#9745;");
					return;
					
				}
				
				$("#submit-btn").css({
					"color": "red",
					"letter-spacing": "0.04rem"
				}).html(`有输入填写不正确，请重来 &#8855;`);
				ele = null;
			});
			$(".clearValue").click(function() {
				$(this).parent().find("input").focus().val("");
				
			});
		});
	</script>
</body>
</html>